<template>
  <div class="app-container">
    <!-- 第一排课程 -->
    <el-row>
      <el-col :span="16">
        <div class="title">热门课程</div>
      </el-col>
      <el-col :span="8">
        <div class="title">企业推荐</div>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="60">
      <!-- 左边的热门课程 -->
      <el-col :span="16" class="hotCourses">
        <div class="course" v-for="(course,index) in hotEtmsCourses" :key="course.index">
          <el-card :body-style="{ padding: '0px'}" class="card">
            <a ref="#" @click="goCoursePage(course.courseId)"><img :src="course.courseCover" height="130px" width="100%"></a>
            <div style="padding:10px;font-size:12px">
              <span style="font-size:15px">{{"\xa0\xa0\xa0\xa0"}}{{course.courseTitle}}
               <el-button class="collection"  type="success" :icon="course.coll ? 'el-icon-star-on' : 'el-icon-star-off' " circle size="mini" @click="collection1(index,course.courseId)" ></el-button>
              </span><br><br>
              <span>{{course.courseDescription | textHandle(course.courseDescription)}}</span>
            </div>
          </el-card>
        </div>

      </el-col>
      <!-- 右边的课程推荐 -->
      <el-col :span="8">
        <el-scrollbar style="height:450px">
          <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
          <div class="recommend" v-for="(course,index) in crEtmsCourses" :key="course.index">
          <el-card :body-style="{ padding: '0px' }">
            <a ref="#" @click="goCoursePage(course.courseId)"><img :src="course.courseCover" width="100%" height="120px" ></a>
            <div style="padding: 14px;font-size:12px">
              <span style="font-size:15px">{{"\xa0\xa0\xa0\xa0"}}{{course.courseTitle}}
                <el-button class="collection"  type="success" :icon="course.coll ? 'el-icon-star-on' : 'el-icon-star-off' " circle size="mini" @click="collection2(index,course.courseId)" ></el-button></span><br><br>
              <span>{{course.courseDescription | textHandle1(course.courseDescription)}}</span>      
            </div>
          </el-card>
          <br>
        </div>
        </ul>
        </el-scrollbar>
        
        
      </el-col>
    </el-row>
    <!-- 全部课程标题 -->
    <el-row>
      <el-col :span="24" class="center">全部课程</el-col>
    </el-row>
    <!-- 分类 -->
    <el-row>
      <el-col class="selectAll" :span="24" >
        <table cellspacing="10" cellpadding="10" align="center" style="text-align:center">
          <tr>
            <td>所属类别： </td>
            <td><el-link type="info"  @click="showAllCourses">清除</el-link></td>
            <td v-for="type in depts" :key="type.index"><el-link type="primary" @click="findByDept(type.deptName)"><span :class="{'selectedColor' :flag2==type.deptName}">{{type.deptName}}</span></el-link></td>
          </tr>
          <tr>
            <td>课程类型： </td>
            <td><el-link type="info"  @click="showAllCourses">清除</el-link></td>
            <td v-for="require in required" :key="require.index"><el-link type="primary" @click="findByRequired(require.name)"><span :class="{'selectedColor' :flag1==require.name}">{{require.name}}</span></el-link></td>
          </tr>
        </table>
        <div style="margin-left:450px">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="课程/培训名称：">
              <el-input v-model="courseFindByPage1.etmsCourse.courseTitle" placeholder="课程名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="showAllCourses">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <!-- 第三排 全部课程分类 -->
    <el-row :gutter="60" >
      <el-col class="allCourse" :span="24" >
        <el-col class="showOne" :span="6" v-for="(course,index) in courseFindByPage.etmsCourse" :key="course.index">
          <el-card :body-style="{ padding: '0px' }" style="height:220px">
            <a ref="#" @click="goCoursePage(course.courseId)"><img :src="course.courseCover" height="120px" width="100%"></a>
            <div style="padding: 14px;font-size:12px">
              <span style="font-size:15px">{{"\xa0\xa0\xa0\xa0"}}{{course.courseTitle}}
                <el-button class="collection"  type="success" :icon="course.coll ? 'el-icon-star-on' : 'el-icon-star-off' " circle size="mini" @click="collection3(index,course.courseId)" ></el-button></span><br><br>
              <span>{{course.courseDescription | textHandle1(course.courseDescription)}}</span>
            </div>
          </el-card>
        </el-col>
      </el-col>
      <el-col :span="24">
        <div class="1paging">
          <el-pagination  @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[8]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="total"
          style="margin-top: 30px; margin-bottom: 20px; text-align: center;">
        </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-row>

      


    </el-row>
  </div>
</template>

<script>
import {findHotCourses} from '@/api/myhome'
import {findCompanyRecommend} from '@/api/myhome'
import {getList} from '@/api/course'
import {addCourse} from '@/api/myhome'
import {findAll} from '@/api/dept';


  export default {
    data() {
      return {
        count: 0,
        flag1:'',
        flag2:'',
        depts:{},
        required:[{name:'必修'},{name:'选修'}],
        userId:this.$store.getters.userId,
        formInline: {
          user: '',
          region: ''
        },
        /* 热门 */
        hotEtmsCourses: [{
            courseId:'',
            courseDescription:'',
            courseCover: require("../../static/img/1.jpg"),
            courseTitle:"",
            coll:false
          },
        ],
        /* 企业推荐 */
        crEtmsCourses: [{
            courseId:'',
            courseDescription:'',
            courseCover: require("../../static/img/1.jpg"),
            courseTitle:"",
            coll:false
          },
        ],
        /* 分页查询全部课程 */
        courseFindByPage: {
          page:1,
          limit:8,
          etmsCourse:{
            courseTitle: "",
            courseType: "",
            createdBy: "",
            courseRequired: "",
            coll:false
          },
        },
        courseFindByPage1: {
          page:1,
          limit:8,
          etmsCourse:{
            courseTitle: "",
            courseType: "",
            createdBy: "",
            courseRequired: "",
          },
        },
        currentPage:1,
        total:0,
        /* loading加载 */
        loading:this.$loading({
            lock: true,
            text: "数据加载中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
      })

      }
      
    },
    filters: { 
      /* 给左边的字段限制 */
  　　textHandle: function(val) {
      let textNew = val
      if (val.length > 40) {
        textNew = val.slice(0, 40) + '…'
      }
      return textNew
    },
    /* 给右边的字段限制 */
    textHandle1: function(val) {
      let textNew = val
      if (val.length > 30) {
        textNew = val.slice(0, 30) + '…'
      }
      return textNew
    },

  },
    created() {
      this.showHotCourses();
      this.showCommpanyRecommend();
      this.showAllCourses();
      this.showDepts()
    },
    
    methods: {
       load () {
        this.count += 2
      },
      //部门展示
      showDepts(){
        findAll().then(res =>{
          this.depts = res.data
          this.loading.close()
        })
      },
      //热门课程展示
      showHotCourses(){
        findHotCourses().then(res =>{
          for(var i = 0 ; i < res.data.length;i++){
              res.data[i].coll = false;
          }
          console.log(res);
          this.hotEtmsCourses = res.data
        })
      },
      //企业推荐课程展示
      showCommpanyRecommend(){
        findCompanyRecommend().then(res =>{
          for(var i = 0 ; i < res.data.length;i++){
              res.data[i].coll = false;
          }
          console.log(res);
          this.crEtmsCourses = res.data
        })
      },
      //全部课程展示
      showAllCourses(){
        this.flag1 = '',
        this.flag2 = '',
        this.courseFindByPage1.etmsCourse.courseRequired = ''
        this.courseFindByPage1.etmsCourse.courseType = ''
        getList(this.courseFindByPage1).then(res =>{
          for(var i = 0 ; i < res.data.list.length;i++){
              res.data.list[i].coll = false;
          }
          console.log(res);
          this.courseFindByPage.etmsCourse = res.data.list;
          this.currentPage = res.data.pageNum;
          this.total = res.data.total
          this.loading.close()
        })
      },
      //点击类别查询
      findByDept(deptName){
        if(deptName){
          this.flag2 = deptName
        }
        this.courseFindByPage1.etmsCourse.courseType = deptName
        getList(this.courseFindByPage1).then(res => {
        console.log(res);
        this.courseFindByPage.etmsCourse = res.data.list;
        this.currentPage = res.data.pageNum
      })
    },
      //点击必修/选修查询
      findByRequired(required){
        console.log(required);
        if(required){
          this.flag1 = required
        }
        this.courseFindByPage1.etmsCourse.courseRequired = required
        
        getList(this.courseFindByPage1).then(res => {
        console.log(res);
        this.courseFindByPage.etmsCourse = res.data.list;
        this.currentPage = res.data.pageNum
      })
    },
      //分页查询
      handleCurrentChange(val) {
        this.courseFindByPage1.page = Number(val)
        console.log(this.courseFindByPage1)
        getList(this.courseFindByPage1).then(res => {
          console.log(res);
          this.courseFindByPage.etmsCourse = res.data.list;
          this.currentPage = res.data.pageNum
        })  
        console.log(`当前页: ${val}`);
      },
      /* 收藏功能1 */
      collection1(index,courseId){
          console.log(this.hotEtmsCourses[index].coll)
          this.hotEtmsCourses[index].coll = !this.hotEtmsCourses[index].coll
          addCourse(this.userId,courseId).then(res =>{
            console.log(res);
            if(res.code == 200){
              this.$notify.success({
              title: '成功',
              message: res.message,
            });
            }else{
              this.$notify.warning({
              title: '错误',
              message: res.message,
            });
          } 
        }) 
      },
      collection2(index,courseId){
          console.log(this.crEtmsCourses[index].coll)
          this.crEtmsCourses[index].coll = !this.crEtmsCourses[index].coll
          addCourse(this.userId,courseId).then(res =>{
            console.log(res);
            if(res.code == 200){
              this.$notify.success({
              title: '成功',
              message: res.message,
            });
            }else{
              this.$notify.warning({
              title: '错误',
              message: res.message,
            });
          } 
        }) 
      },
      collection3(index,courseId){
          console.log(this.courseFindByPage.etmsCourse[index].coll)
          this.courseFindByPage.etmsCourse[index].coll = !this.courseFindByPage.etmsCourse[index].coll
          addCourse(this.userId,courseId).then(res =>{
            console.log(res);
            if(res.code == 200){
              this.$notify.success({
              title: '成功',
              message: res.message,
            });
            }else{
              this.$notify.warning({
              title: '错误',
              message: res.message,
            });
          } 
        }) 
      },
      /* 去课程页面 */
      goCoursePage(courseId){
        this.$router.push({
        name:'coursePage',
        query:{
          courseId : courseId
          }
        })
      },
    }

  }

</script>

<style>
  el-input {
    width: 50px;
  }

  .title {
    width: 100px;
    font-size: 20px;
    color: rgb(96, 134, 192);
    /* background-color: rgb(107, 180, 182); */
    /* border: solid rgb(73, 168, 172) 1px; */
   /*  text-decoration: underline */
    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(42, 160, 196, 0.75), rgba(0, 0, 0, 0)); */
  }
  .hotCourses{
    border-right: 1px  double rgb(72, 179, 187); 
  }

  .course {
    float: left;
    display: flex;
    width: 30%;
    height: 220px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .recommend {
    width: 65%;
    height: 220px;
    display: flex;
    margin-top: 10px;
  }

  .center {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    font-size: 25px;
    color: rgb(59, 88, 143);
    /* text-decoration: underline */
  }

  .selectAll {
    width: 100%;
    margin-top: 30px;
    height: 200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .allCourse {
    width: 100%;
    margin-top: 15px;
    height: 550px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .showOne {
    margin-top: 25px;
  }

  .paging {
    justify-content: center;
    margin-left: 200;
  }

  .collection{
   float:right;
  }

  .selectedColor {
     color: #1e7699; 
     border: solid rgb(113, 206, 209) 1px;
  }

  .el-scrollbar__wrap{
    overflow-x: hidden;
  }


</style>
